/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 14:19:45
 * @Description: 首页及其子页面公用样式
 */
@import "@/assets/style/global.scss";

@mixin menuSideItem($item-name: console) {
    &.#{$item-name} {
        background: url('./images/'+ $item-name +'_icon.png') no-repeat center;
    }
}

@mixin menuSideItemActive($item-name: console) {
    &.#{$item-name} {
        background: url('./images/'+ $item-name +'_active_icon.png') no-repeat center;
    }
}

.home-side{
    width: 260px !important;
    max-width: 260px !important;
    background-color: $sideBgColor;
    flex: none !important;
    min-height: calc(100vh - 70px);
    $menuBg: #33394a;
    .ant-menu {
        background: transparent;
    }
    .ant-menu-submenu-open,
    .ant-menu-submenu-active{
        color: $grayLight;
    }
    .ant-menu-submenu-selected{
        color: $grayLight;
        background: $menuBg;
        .ant-menu-submenu-title{
            border-left: 4px solid $blue;
        }
        .father-item{
            .icon{
                @include menuSideItemActive(console);
                @include menuSideItemActive(application);
            }
        }
    }
    .ant-menu-submenu{
        color: $gray;
        padding-bottom: 0;

        &:nth-child(2) {
            .father-item{
                text-indent: 66px;
            }
        }
    }
    .father-item{
        font-size: 16px;
        color: $gray;
        position: relative;
        text-indent: 62px;
        .icon{
            display: inline-block;
            width: 24px;
            height: 24px;
            position: absolute;
            top: 8px;
            left: 26px;
            @include menuSideItem(console);
            @include menuSideItem(application);
        }
    }
    .son-item{
        position: relative;
        text-indent: 90px;
        padding-left: 0 !important;
        a{
            display: block;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
            color: $gray;
        }

        .icon {
            display: inline-block;
            width: 22px;
            height: 22px;
            position: absolute;
            top: 0;
            left: 52px;
            @include menuSideItem(gkyj);
            @include menuSideItem(glfx);
            @include menuSideItem(wdzl);
            @include menuSideItem(wdtj);
            @include menuSideItem(gzbz);
            @include menuSideItem(qyxxjs);
            @include menuSideItem(appplxxjs);
            @include menuSideItem(yblmd);
            @include menuSideItem(wzqyfb);
            @include menuSideItem(ipdzgs);
            @include menuSideItem(sjgsd);
        }
        &.ant-menu-item-selected{
            background-color: transparent;
            color: $blue;
            &:after{
                visibility: hidden;
            }
        }
        .active{
            color: $blue;
            .icon {
                @include menuSideItemActive(gkyj);
                @include menuSideItemActive(glfx);
                @include menuSideItemActive(wdzl);
                @include menuSideItemActive(wdtj);
                @include menuSideItemActive(gzbz);
                @include menuSideItemActive(qyxxjs);
                @include menuSideItemActive(appplxxjs);
                @include menuSideItemActive(yblmd);
                @include menuSideItemActive(wzqyfb);
                @include menuSideItemActive(ipdzgs);
                @include menuSideItemActive(sjgsd);
            }
        }
    }
}
.side-right{
    width: 100%;
    .common-title{
        color: $grayLight;
        font-size: 16px;
        height: 80px;
        line-height: 80px;
    }
    .common-pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
        .ant-pagination-item-link,
        .ant-pagination-item{
            background-color: $headerBgColor;
            border: none;
            color: $gray;
            a,
            .ant-pagination-item-ellipsis {
                color: $gray;
            }
            &.ant-pagination-item-active{
                a{
                    color: $blue;
                    border: 1px solid $blue;
                    border-radius: 4px;
                }
            }
        }
    }
}
